<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <title>地址选择</title>
  <script src="js/jquery.js"></script>
  <script src="js/jquery-form.js"></script>
 
  <link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.0/style/weui.min.css">
  <link rel="stylesheet" href="css/weui.css">
  <link rel="stylesheet" href="css/jquery-weui.css">
  <link href="css/font-awesome.min.css" rel="stylesheet">
  <!-- >>>>>>> be01577cdc31dce096201d1dd2e0119c96c00d87 -->
</head>
<style>
body {
  background: #ccc;
}

.secondPage,
.thirdPage {
  display: none;
}

.weui-uploader__input-box>img {
  width: 100%;
  height: 100%
}

.page__bd .weui-cells {
  margin-top: 0;
}

.weui-cell__title {
  padding: 5px 14px;
}

.weui-cell__hd i {
  margin-right: 10px;
}

.weui-cell.weui-cell_select>.weui-cell__hd {
  padding: 0 14px;
}

.left1 {
  margin-right: 14px;
}

.weui-btn.weui-btn_primary {
  width: 92%;
  /*transform: translateY(60%);*/
  margin: 30px auto;
}
</style>
<!-- <<<<<<< HEAD -->

<body>
  <div class="wrapper">
    <div class="firstPage">
      <form id="repairOrderForm" enctype="multipart/form-data" method="post">
        <div class="weui-cells">
          <div class="weui-cell__title">报修内容</div>
          <div class="weui-cell weui-cell_access">
            <div class="weui-cell__hd">
              <i class="fa icon-suitcase fa-fw"></i>
            </div>
            <div class="weui-cell__bd">
              <input class='weui-input' placeholder="选择日期" type="text" name="hopeDate" id='datetime-picker' />
            </div>
            <div class="weui-cell__ft"></div>
          </div>
          <!-- >>>>>>> be01577cdc31dce096201d1dd2e0119c96c00d87 -->
          <div class="weui-cell weui-cell_access">
            <div class="weui-cell__hd">
              <i class="fa icon-suitcase fa-fw"></i>
            </div>
            <div class="weui-cell__bd">
              <a href="#secondPage"><p id='locSelect'>选择位置</p></a>
              <input type="hidden" name="questionOne">
              <input type="hidden" name="questionTwo">
              <input type="hidden" name="questionThree">
            </div>
            <div class="weui-cell__ft"></div>
          </div>
          <!-- >>>>>>> be01577cdc31dce096201d1dd2e0119c96c00d87 -->
          <div class="weui-cell weui-cell_accesss">
            <div class="weui-cell__hd">
              <i class="fa icon-suitcase fa-fw"></i>
            </div>
            <div class="weui-cell__bd">
              <p>上传图片</p>
            </div>
            <div class="weui-cell__ft"></div>
          </div>
          <div class="page">
            <div class="page__bd">
              <div class="weui-gallery" id="gallery">
                <span class="weui-gallery__img" id="galleryImg"></span>
                <div class="weui-gallery__opr">
                  <a href="javascript:" class="weui-gallery__del">
                    <i class="deleteImg weui-icon-delete weui-icon_gallery-delete"></i>
                  </a>
                </div>
              </div>
              <div class="weui-cells weui-cells_form">
                <div class="weui-cell">
                  <div class="weui-cell__bd">
                    <div class="weui-uploader">
                      <div class="weui-uploader__bd">
                        <ul class="weui-uploader__files" id="uploaderFiles">
                        </ul>
                        <div class="weui-uploader__input-box">
                          <input id="uploaderInput" class="weui-uploader__input" type="file" name="files" accept="image/*" multiple />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="weui-cells">
          <div class="weui-cell__title">联系人信息</div>
          <div class="weui-cell ">
            <div class="weui-cell__hd">
              <i class="fa icon-suitcase fa-fw"></i>
            </div>
            <div class="weui-cell__bd">
              <input type="text" placeholder="姓名" name="username" class='weui-input' />
            </div>
            <div class="weui-cell__ft"></div>
          </div>
          <!-- >>>>>>> be01577cdc31dce096201d1dd2e0119c96c00d87 -->
          <div class="weui-cell weui-cell_accesss">
            <div class="weui-cell__hd">
              <i class="fa icon-suitcase fa-fw"></i>
            </div>
            <input type="text" placeholder="电话" name='userTel' class='weui-input'>
            <div class="weui-cell__ft"></div>
          </div>
          <a class="weui-cell weui-cell_access" id='address' data-id='house'>
            <div class="weui-cell__hd">
              <i class="fa icon-suitcase fa-fw"></i>
            </div>
            <div class="weui-cell__bd">
              <input type="text" id='myHouse' placeholder="地址" class='weui-input'>
              <input type="hidden" name="housePropertyId">
              <!-- >>>>>>> be01577cdc31dce096201d1dd2e0119c96c00d87 -->
            </div>
            <div class="weui-cell__ft"></div>
          </a>
        </div>
      </form>

      <button class='weui-btn weui-btn_primary' id="submitRepair">提交</button>
    </div>
    <!-- first page end -->
    <div class="secondPage" id="secondPage">
      <div class="weui-cells__title">选择报修位置</div>
      <div class="weui-cells">
        <div class="weui-cell weui-cell_select">
          <div class="weui-cell__hd left1">第一级问题</div>
          <div class="weui-cell__bd">
            <select class="weui-select" name="select1" id='proStep1'>
            </select>
          </div>
        </div>
        <div class="weui-cell weui-cell_select">
          <div class="weui-cell__hd left1">第二级问题</div>
          <div class="weui-cell__bd">
            <select class="weui-select" name="select2" id='proStep2'>
            </select>
          </div>
        </div>
        <div class="weui-cell weui-cell_select">
          <div class="weui-cell__hd left1">第三级问题</div>
          <div class="weui-cell__bd">
            <select class="weui-select" name="select2" id='proStep3'>
            </select>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">问题描述</label>
          </div>
          <div class="weui-cell__bd">
            <input class="weui-input" id='questionDesc' type="text" placeholder="请输入具体问题" required>
          </div>
        </div>
        <button class='weui-btn weui-btn_primary' id='submitQuestion'>提交</button>
      </div>
    </div>
    <!-- second Page end -->
    <!-- third Page begin   显示用户房产信息-->
    <div class="thirdPage">
      <div class="weui-cells weui-cells_radio" id="housePropertiesList">
        <label class="weui-cell weui-check__label" for="aa">
          <div class="weui-cell__bd">
            <p>万科33栋451</p>
          </div>
          <div class="weui-cell__ft">
            <input type="radio" class="weui-check" name="radio1" id="aa">
            <span class="weui-icon-checked"></span>
          </div>
        </label>
        <label class="weui-cell weui-check__label" for="bb">
          <div class="weui-cell__bd">
            <p>万科33栋450</p>
          </div>
          <div class="weui-cell__ft">
            <input type="radio" name="radio1" class="weui-check" id="bb" checked="checked">
            <span class="weui-icon-checked"></span>
          </div>
        </label>
        <label class="weui-cell weui-check__label" for="c">
          <div class="weui-cell__bd">
            <p>万科33栋450</p>
          </div>
          <div class="weui-cell__ft">
            <input type="radio" name="radio1" class="weui-check" id="c" checked="checked">
            <span class="weui-icon-checked"></span>
          </div>
        </label>
        <label class="weui-cell weui-check__label" for="x14">
          <div class="weui-cell__bd">
            <p>万科33栋450</p>
          </div>
          <div class="weui-cell__ft">
            <input type="radio" name="radio1" class="weui-check" id="x14" checked="checked">
            <span class="weui-icon-checked"></span>
          </div>
        </label>
      </div>
      <div class="weui-cells weui-cells_radio">
        <a class="weui-cell weui-cell_link">
          <div class="weui-cell__bd" id="addHouse">添加房产</div>
        </a>
      </div>
      <button class='weui-btn weui-btn_primary save-house' type='button'>确定</button>
      <button class='weui-btn weui-btn_primary save-house' type='button'>删除</button>
    </div>
    <!-- third  Page end -->
    <!-- fourth Page start  添加房产信息 -->
    <div class="fourthPage" style="display: none">
      <div class="weui-cells__title">选择位置</div>
      <div class="weui-cells">
        <div class="weui-cell weui-cell_select">
          <div class="weui-cell__hd left1 ">选择开发商</div>
          <div class="weui-cell__bd">
            <select class="weui-select" name="select2" id='houseAddress1'>
            </select>
          </div>
        </div>
        <div class="weui-cell weui-cell_select">
          <div class="weui-cell__hd left1">选择楼盘</div>
          <div class="weui-cell__bd">
            <select class="weui-select" name="select2" id='houseAddress2'>
            </select>
          </div>
        </div>
        <div class="weui-cell weui-cell_select">
          <div class="weui-cell__hd left1">几期</div>
          <div class="weui-cell__bd">
            <select class="weui-select" name="select2" id='houseAddress3'>
            </select>
          </div>
        </div>
        <div class="weui-cell weui-cell_select">
          <div class="weui-cell__hd left1">几栋几单元</div>
          <div class="weui-cell__bd">
            <select class="weui-select" name="select2" id='houseAddress4'>
            </select>
          </div>
        </div>
        <div class="weui-cell weui-cell_select">
          <div class="weui-cell__hd left1">房号</div>
          <div class="weui-cell__bd">
            <select class="weui-select" name="select2" id='houseAddress5'>
            </select>
          </div>
        </div>
        <a>
          <button class='weui-btn weui-btn_primary' type='submit' id="postHouseProperties">提交</button>
        </a>
      </div>
    </div>
    <!--弹出正确提示框-->
    <div id="toast" style="display: none;">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <i class="weui-icon-success-no-circle weui-icon_toast"></i>
        <p class="weui-toast__content">已完成</p>
      </div>
    </div>
  </div>
</body>

<script src='js/jquery-weui.js'></script>

<script>
Date.prototype.Format = function (fmt) { 
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}
var startTime=new Date().Format("yyyy-MM-dd");
var endTime=new Date(Date.now()+432000000).Format("yyyy-MM-dd");

var hourObj=["09-10","10-11","11-12",'13-14','14-15','15-16','16-17','17-18']


var mTest=$("#datetime-picker").datetimePicker({
  min: startTime,
  max: endTime,
  times: function () {
          return [
            {
              values: hourObj
            },
            {
              divider: true,  // 这是一个分隔符
              content: '时'
            }
          ];
        },
        onChange: function (picker, values, displayValues) {
          hourObj.push("test")
          console.log(values);
          console.log(picker)
          console.log(displayValues)
        }
});


$(function() {
  $("#locSelect").on("click", function() {
    $(".firstPage").hide();
    $(".secondPage").show();
  })

  $("#submitQuestion").on("click", function() {
    //      console.log("☞"+$("#questionDesc").val());
    var data1 = $("#proStep1").find("option:selected").text();
    var data2 = $("#proStep2").find("option:selected").text();
    var data3 = $("#proStep3").find("option:selected").text();
    if (data1 == '' || data2 == '' || data3 == '') {
      alert("请选择完整保修问题");
      return false;
    }

    if ($("#questionDesc").val() == '') {
      alert("请填写问题描述");
      return false;
    }


    var data = data1 + "," + data2 + "," + data3;
    // >>>>>>> be01577cdc31dce096201d1dd2e0119c96c00d87
    $(".secondPage").hide();
    $(".firstPage").show();
    $("input[name='questionOne']").val(data1);
    $("input[name='questionTwo']").val(data2);
    $("input[name='questionThree']").val(data3);
    $("#locSelect").text("").append(data)
    $("#locSelect").unbind("click");
  })

  // 房屋位置
  $('#address').on('click', function() {
    $(".firstPage").hide();
    $(".thirdPage").show();
  });
  // 点击添加房产
  $('#addHouse').on('click', function() {
    $(".thirdPage").hide();
    $(".fourthPage").show();
  });

  $(".save-house").on("click", function() {
    console.log(houseData)
    var houseData = $("input:checked").parent().prev().find("p").text();
    var housePropertyId = $("input:checked").attr("id");
    housePropertyId = housePropertyId.substring(1, 2);

    $('.thirdPage').hide();
    $('.firstPage').show();
    $("#myHouse").val(houseData);
    $("input[name='housePropertyId']").val(housePropertyId);
  })

})
</script>
<!-- 图片预览 -->
<script type="text/javascript">
$(function() {
  var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',
    $gallery = $("#gallery"),
    $galleryImg = $("#galleryImg"),
    $uploaderInput = $("#uploaderInput"),
    $uploaderFiles = $("#uploaderFiles");
    $deleteImg=$(".deleteImg");
     arr=[];
    var indexImg=""

  $deleteImg.on("click",function(){
    // console.log("删除的"+indexImg);
    var deleteLi=$uploaderFiles.find("li").eq(indexImg);
    deleteLi.remove()
    console.log(deleteLi)
  }) 

  $uploaderInput.on("change", function(e) {
    // $uploaderInput
    var src, url = window.URL || window.webkitURL || window.mozURL,
      files = e.target.files;
      console.log(files)
      if(files&&files.length){
        Array.prototype.push.apply(arr,files);
        console.log(arr)
      }

    for (var i = 0, len = files.length; i < len; ++i) {
      var file = files[i];
      if (url) {
        src = url.createObjectURL(file);
        console.log(src);
      } else {
        src = e.target.result;
      }
      $uploaderFiles.append($(tmpl.replace('#url#', src)));
    }
  });
  $uploaderFiles.on("click", "li", function() {
     indexImg= $(this).index()

    console.log("放大的index"+indexImg)
    $galleryImg.attr("style", this.getAttribute("style"));
    $gallery.fadeIn(100);
  });
  $gallery.on("click", function() {
    console.log($(this))
    $gallery.fadeOut(100);
  });


});
</script>
 <script src="js/jgx.js"></script>
</html>